/**
* 培训目录进度
**/

<template>
  <el-comtainer>

    <div>
      <el-header>
        <h1>培训课程进度查询</h1>
      </el-header>
      <el-main>
        <div>
          <h2>培训名称：{{"《"+couseList.trainName+"》"}}</h2>
          <br />
          <h3>课程名称：</h3>
        </div>
        <div class="line" v-for="(item,index) in couseList.userList" :key="index">
          <ul>
            <!-- <li>{{item.scoreId}}</li> -->
            <li>
              <!-- <h3><a :href="'http://localhost:9999/#/course/course/'" target="_blank"></a></h3> -->
              <el-button type="success" round @click="goCourse(item.scoreId)">
                {{item.courseTitle}}
              </el-button>

            </li>
            <li>
              <h4>{{'进度:'}}</h4>
            </li>
            <!-- <el-progress :percentage="Math.ceil(item.catalogProgress)">课程进度</el-progress> -->
            <li>
              <el-progress :text-inside="true" type="line" format:aaaa show-text="true" :stroke-width="26"
                :percentage="Math.ceil(item.catalogProgress)"></el-progress>
            </li>
          </ul>
        </div>
      </el-main>

    </div>
  </el-comtainer>
  <!-- <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item  index="1"><a href="http://localhost:9999/#/goods/Goods/" target="blank">我的首页</a></el-menu-item>
 
    <el-menu-item index="2" >我的培训</el-menu-item>
   
  
  <el-menu-item index="3" >我的课程</el-menu-item>
</el-menu> -->






</template>


<script>
  // 导入组件


  // 导出模块
  export default {
    // 模块名字
    name: "template",
    // 模块数据
    data() {
      //数据  
      return {
        trainId: 1,
        couseList: []
      };
    },
    created() {
      this.trainId = this.$route.query.trainid
      console.log("培训地址", this.$route.query.trainid);
      this.getCourse();
    },

    methods: {
      addFun() {},
      submitFun() {},

      getCourse() {

        this.$axios.get("/api/userTrainCourse/findUserTrainCourse/" + this.trainId).then(res => {
          console.log(res);
          this.couseList = res.data.data

        }).catch(e => {
          console.log(e);
        })
      },
      goCourse(courseId1) {
        console.log(courseId1);
        this.$router.push({
          path: '/course/course',
          query: {
            "courseId": courseId1
          }
        })
      }
      // goPage:function(id){
      //   console.log(id);
      //   if(id==this.couseList.scoreId){
      //     window.location.href()
      //   };

      // }
    }

    // 创建完毕状态(里面是操作)



  };

</script>
// scoped 样式只在本组件使用
<style scoped>
  /**
 * 导入css样式组件
 * @import "../assets/css/components/index.css";
 */
  .el-header,
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
